<template>
  <div>
    <p>
      运单号：<a-input :maxLength="128" style="width: 300px" v-model.trim="waybillNo" />
      <a-button style="margin-left: 20px" type="primary" @click="isScan"  >
        确认扫描
      </a-button>
    </p>
    <a-table
      :columns="columns"
      :data-source="waybillTableData"
      :pagination="false"
      :scroll="{ x: 1500 }"
    >
      <!-- 接收时间 -->
      <span slot="recordList" slot-scope="text, record">
          <!-- {{}} -->
          <div v-for=" item in record.recordList" :key="item.key">
              {{item.sku+' * '+item.inputNumber}}
          </div>
      </span>
      <!-- 状态-->
      <span slot="applyState" slot-scope="text, record">
        <span  style="color: #3eae7c">
          {{ record.applyState==='35'?'已发货':'已发货' }}
        </span>
      </span>

      <span slot="remark" slot-scope="text, record">
        <span>
          {{ record.remark===null?'暂无':'' }}
        </span>
      </span>
    </a-table>
  </div>
</template>

<script>
import { Outbounddel_trackerCode } from "@/apis/clientSide/OrderManage/Outbound";
import moment from 'moment'
export default {
  data() {
    return {
      waybillNo: null,
      waybillTableData: [],
    };
  },
  methods: {
    async isScan() {
      // .substring(this.waybillNo.length-12)
      let {code,responseBody} = await Outbounddel_trackerCode(this.waybillNo);
      if(code==='200'){
        if(responseBody){
          responseBody.key=this.waybillTableData.length-1;
         responseBody.scanTime= moment().format('YYYY-MM-DD hh:mm:ss')
          this.waybillTableData.push(responseBody);
          this.waybillNo=null;
        }else{
          this.$message.error('未查询到相关数据！');
          return false
        }
      }
    },
  },
  computed: {
    columns() {
      return [
        {
          title: "订单编号",
          dataIndex: "orderNumber",
          align: "center",
          scopedSlots: { customRender: "orderNumber" },
          width: "10%",
        },
        {
          title: "运单号",
          dataIndex: "waybillNo",
          align: "center",
          scopedSlots: { customRender: "waybillNo" },
          width: "9%",
        },
        {
          title: "SKU*数量",
          dataIndex: "recordList",
          align: "center",
          width: "9%",
          scopedSlots: { customRender: "recordList" },
        },
        {
          title: "状态",
          dataIndex: "applyState",
          scopedSlots: { customRender: "applyState" },
          align: "center",
          width: "8%",
          // ellipsis: true,
        },
        {
          title: "扫描时间",
          dataIndex: "scanTime",
          scopedSlots: { customRender: "scanTime" },
          align: "center",
          width: "9%",
        },
        {
          title: "备注",
          dataIndex: "remark",
          scopedSlots: { customRender: "remark" },
          align: "center",
          width: "9%",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
</style>